<template>
    <div class="detail">
        <!-- 主图轮播 -->
        <van-swipe :autoplay="3000" lazy-render height="375">
            <van-swipe-item v-for="image in banners" :key="image.id">
                <img :src="image.url" style="width: 100%; height: 100%;" />
            </van-swipe-item>
        </van-swipe>

        <!-- 弹幕 -->
        <van-barrage v-model="list">
            <div class="video" style="width: 100%; height: 150px"></div>
        </van-barrage>

        <!-- 商品描述 -->
        <span class="detail-title1">￥{{ details?.price }}</span>
        <span class="detail-title2">原价：￥{{ details?.originPrice }}</span>

        <!-- 商品标题 -->
        <div class="detail-title">{{ details?.title }}</div>

        <!-- 商品介绍 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="box">
                <div>商品介绍</div>
                <div class="recommend-list-item" v-for="pro in products" :key="pro.id">
                    <img :src="pro.url" style="width: 100%; height: 100%;">
                </div>
            </div>
        </van-list>
        <!-- 加入购物车-动作栏 -->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" to="/cart" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button type="warning" text="加入购物车" @click="handelAddToCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>


    </div>
</template>

<script lang="ts" setup>
import { ref, /* computed */ } from 'vue';
import { getDetail } from '@/api/detail'
import { useRoute } from 'vue-router'
import { showToast } from 'vant';
import useCartStore from '@/store/cart';

// 创建购物车仓库
const store = useCartStore()

// 当前激活的路由配置对象
const route = useRoute()

// 详情数据
const details = ref<Product>()

// 主图轮播数据
const banners = ref()

// 弹幕数据
let newlist: any = []
let defaultList: any = []
const list = ref()

// 商品介绍数据
const products = ref<any>()

/* const defaultList = [
    { id: 100, text: '轻量' },
    { id: 101, text: '可定制的' },
    { id: 102, text: '移动端' },
    { id: 103, text: 'Vue' },
    { id: 104, text: '组件库' },
    { id: 105, text: 'VantUI' },
    { id: 106, text: '666' },
]; */


// 查询详情页面数据
const fetchDetailData = async () => {
    console.log(route.params);
    try {
        const result = await getDetail(route.params.id as string)
        console.log('详情：', result);
        details.value = result.detail
        banners.value = result.detail.photo

        // 弹幕
        newlist = result.detail.carouselList
        console.log('newlist:', newlist);

        newlist.forEach((item: any) => {
            defaultList.push({ id: Math.floor(Math.random() * 10), text: item.nickName + item.desc })
        })
        // console.log('defaultList', defaultList);
        list.value = [...defaultList]
        // console.log('list.value', list.value);

        products.value = result.detail.descContentList

    } catch (error) {
        console.log('查询详情异常：', error);

    }
}
fetchDetailData()


const count = ref<number>(1)
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)

const onLoad = async () => {
    console.log('正在加载...');

    try {
        // 查询更多数据
        const result = await getDetail(route.params.id as string)
        // 将查询出的更多数据与原推荐商品数据合并
        products.value = products.value.concat(result.detail.descContentList)
        console.log('result====>>:', result)

        // 更新页码值
        count.value += 1
        // 处理完毕，手动将 loading 置为 false
        loading.value = false
        // 如果没有更多数据，则将 finished 置为 true
        finished.value = result.detail.descContentList.length === 0
    } catch (error) {
        console.log('查询数据异常:', error)
        //  出现异常，重置 loading 与 finished
        loading.value = false
        finished.value = true
    }

}


// 加入购物车
const handelAddToCart = () => {
    console.log('---加入购物车---')
    const { id, image, title, originPrice, price, couponValue } = <Product>details.value
    const currProd: CartProduct = {
        id,
        title,
        image,
        originPrice,
        price,
        couponValue,
    }
    console.log('当前选购商品', currProd)
    // 加入购车，保存到 store 中 
    store.addToCart(currProd)
    showToast({
        type: 'success',
        message: '加入购物车成功',
        duration: 1000,
    })
}
</script>

<style lang="less" scoped>

.detail-title {
    font-size: 18px;
    font-weight: 700;
}

.detail-title1 {
    font-size: 36px;
    font-weight: 900;
    color: red;
}

.detail-title2 {
    font-size: 18px;
    font-weight: 700;
    color: gray;
    text-decoration: line-through;
}

.van-barrage {
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 9999;
    width: 100%;
    color: white;
}

.box {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.box>:first-child {
    background-color: aquamarine;
}
</style>
